<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证器</title>
    <style>
        
        .valid{
            color:red;
        }
    </style>
</head>
<body>
    <div id="app">
        <input :class="{valid:classValid}" type="text" v-model = "username" @input="change">
        <span>{{msg}}</span>
    </div>
    <script src="/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                classValid:false,
                username:'',
                msg:"请填写用户名"
            },
            methods:{
                change(){
                   if(this.username.length > 3){
                        this.classValid = true
                   }else{
                    this.classValid = false
                   }
                }
            }
        })
    </script>
</body>
</html> -->



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证器</title>
</head>

<body>
    <div id="app">
        <input v-username="{len:4,fn:usernamemsg}" type="text" v-model="username" @input="change">
        <span>{{msg}}</span>
    </div>
    <script src="/vue.js"></script>
    <script>
        Vue.directive('username', (el, binds) => {
            let len = binds.value.len || 3
            if (el.value.length > len) {

                binds.value.fn("aaa")
                el.style.color = 'red'
            } else {
                binds.value.fn()
                el.style.color = ''
            }
        })





        const app = new Vue({
            el: "#app",
            data: {
                classValid: false,
                username: '',
                msg: "请填写用户名"
            },
            methods: {
                change() {
                    if (this.username.length > 3) {
                        this.classValid = true
                    } else {
                        this.classValid = false
                    }
                },
                usernamemsg(msg='') {
                    this.msg =msg
                }
            }
        })
    </script>
</body>

</html>